<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
            <Card>
                <header>
                    <Row>
                        <span>资金方:</span>
                        <Select v-model="payFlowCondition.fundSource" style="width:150px" placeholder="资金方">
                            <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName }}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">产品:</span>
                        <Select v-model="payFlowCondition.productName" style="width:150px" placeholder="产品">
                            <Option v-for="item in productList" :value="item.productType" :key="item.id">{{ item.productTypeName }}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">客户姓名:</span>
                        <Input v-model="payFlowCondition.custName" placeholder="客户姓名" style="width: 150px" />
                         <span style="width: 200px;margin-left: 20px;">身份证:</span>
                        <Input v-model="payFlowCondition.custCardNo" placeholder="身份证" style="width: 150px" />
                         <span style="width: 200px;margin-left: 20px;">还款通道:</span>
                        <Select v-model="payFlowCondition.payChannel" style="width:150px" placeholder="还款通道">
                            <Option v-for="item in passWayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">渠道大类:</span>
                        <Select style="width:150px" placeholder="渠道大类" v-model="payFlowCondition.patternCode" @on-change="patternChange">
                            <Option v-for="item in patternList" :value="item.patternCode" :key="item.patternCode">{{ item.patternName }}</Option>
                        </Select>
                    </Row>
                    <Row style="margin-top:20px">
                      <span>渠道:</span>
                        <Select v-model="payFlowCondition.productChannel" style="width:150px" placeholder="渠道">
                            <Option v-for="item in channelList" :value=" item.channelCode" :key=" item.channelCode">{{ item.channelName}}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">还款类型:</span>
                        <Select v-model="payFlowCondition.tradeType" style="width:135px" placeholder="还款类型">
                            <Option v-for="item in paymentTypeList" :value="item.styleCode" :key="item.styleCode">{{ item.styleName }}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">交易结果:</span>
                        <Select v-model="payFlowCondition.tradeResult" style="width:150px" placeholder="交易结果">
                            <Option v-for="item in paymentResultList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <span style="width: 200px;margin-left: 20px;">交易发起日期(起):</span>
                        <DatePicker type="date" placeholder="交易发起日期(起)" style="width: 150px" v-model="payFlowCondition.tradeBeginDate"></DatePicker>
                        <span>-</span>
                        <span>交易发起日期(止):</span>
                        <DatePicker type="date" placeholder="交易发起日期(止)" style="width: 150px" v-model="payFlowCondition.tradeEndDate"></DatePicker>
                        <Button type="primary" @click="listQuery"  style="margin-left: 10px;" >查询</Button>
                        <Button type="primary" @click="downLoad"  style="margin-left: 10px;" >excel下载</Button>
                    </Row>
                </header>
            </Card>
        </Form>

        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
            </Row>

            <div style="margin-top: 100px;text-align: center;">
                <Page :total="payFlowCondition.total" :current="payFlowCondition.pageNum" :page-size="payFlowCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>
</template>

<script>
import expandRow from './repayment-flow-details-tableExpand.vue'
export default {
  name: 'mutative-router',
  components: { expandRow },
  data () {
    return {
      payFlowCondition: {
        fundSource: '',
        productCode: '',
        custName: '',
        custCardNo: '',
        payChannel: '',
        patternCode: '',
        productChannel: '',
        tradeType: '',
        tradeResult: '',
        tradeBeginDate: '',
        tradeEndDate: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      patternList: [],
      channelList: [],
      fundList: [],
      passWayList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '001',
          label: '快付通（云科谷）'
        },
        {
          value: '002',
          label: '宝付（云科谷）'
        },
        {
          value: '003',
          label: '宝付（口袋）'
        },
        {
          value: '004',
          label: '宝付（渤海）'
        },
        {
          value: '005',
          label: '支付宝'
        },
        {
          value: '006',
          label: '运营'
        }
      ],
      paymentTypeList: [],
      paymentResultList: [
        {
          value: '1',
          label: '交易中'
        },
        {
          value: '2',
          label: '交易成功'
        },
        {
          value: '9',
          label: '交易失败'
        }
      ],

      orderColumns: [
        {
          type: 'expand',
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '资金方',
          key: 'fundSource',
          align: 'center',
          width: 80,
          className: 'tbake'

        },
        {
          title: '进件号',
          key: 'loanId',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '身份证号',
          key: 'custCardNo',
          align: 'center',
          width: 165,
          className: 'tbake'
        },
        // {
        //   title: '电话号码',
        //   key: 'mobileNum',
        //   align: 'center'
        // },
        {
          title: '合同期限',
          key: 'tenor',
          align: 'center',
          width: 75,
          className: 'tbake'
        },
        {
          title: '产品',
          key: 'productName',
          align: 'center',
          width: 75,
          className: 'tbake'
        },
        {
          title: '应还金额',
          key: 'paymentAmount',
          align: 'center',
          width: 110,
          className: 'tbake'
        },
        {
          title: '发起交易时间',
          key: 'tradeTime',
          align: 'center',
          width: 110,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.tradeTime))
            ])
          }
        },
        {
          title: '实际交易金额',
          key: 'paymentAmountAct',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '逾期费用',
          key: 'overdueAmount',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '还款类型',
          key: 'paymentType',
          align: 'center',
          width: 110,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.paymentType === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '自动代扣')
            }
            if (params.row.paymentType === '2') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '主动还款')
            }
            if (params.row.paymentType === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.paymentType === '4') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '主动还款')
            }
            if (params.row.paymentType === '5') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '下期还款')
            }
            if (params.row.paymentType === '6') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '手动代扣')
            }
            if (params.row.paymentType === '9') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝还款')
            }
            if (params.row.paymentType === '10') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝提前结清')
            }
          }
        },
        // {
        //   title: '银行名称',
        //   key: 'bankName',
        //   align: 'center'
        // },
        // {
        //   title: '银行卡号',
        //   key: 'bankCard',
        //   align: 'center'
        // },
        {
          title: '支付通道',
          key: 'passWayName',
          align: 'center',
          width: 110,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.passWayName === '001') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '快付通（云科谷）')
            }
            if (params.row.passWayName === '002') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（云科谷）')
            }
            if (params.row.passWayName === '003') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（口袋）')
            }
            if (params.row.passWayName === '004') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '宝付（渤海）')
            }
            if (params.row.passWayName === '005') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '支付宝')
            }
            if (params.row.passWayName === '006') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '运营')
            }
          }
        },
        // {
        //   title: '产品渠道',
        //   key: 'channelName',
        //   align: 'center'
        // },
        {
          title: '交易结果',
          key: 'paymentResult',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.paymentResult === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '交易中')
            }
            if (params.row.paymentResult === '2' || params.row.paymentResult === '3' || params.row.paymentResult === '4') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '代扣成功')
            }
            if (params.row.paymentResult === '9') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '代扣失败')
            }
          }
        },
        // {
        //   title: '返回信息',
        //   key: 'returnMsg',
        //   align: 'center'
        // },
        {
          title: '订单号',
          key: 'orderNumber',
          align: 'center',
          className: 'tbake'
        }
      ],
      orderData: [
      ]

    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate())
    vm.payFlowCondition.tradeEndDate = tmpEndDate
    tmpDate.setMonth(tmpDate.getMonth() - 1)
    vm.payFlowCondition.tradeBeginDate = tmpDate
    this.screenConditon()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.payFlowCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.payFlowCondition.pageSize = pageLength
      vm.listQuery()
    },
    patternChange (value) {
      var vm = this
      vm.j = 0
      for (vm.j; vm.j < vm.patternList.length; vm.j++) {
        if (vm.patternList[vm.j].patternCode === value) {
          vm.channelList = vm.patternList[vm.j].patternList
        }
      }
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/balanceAccount/service/listQuery', vm.payFlowCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.payFlowCondition.total = data.data.total
      }).catch(er => {

      })
    },
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/balanceAccount/service/listScreenCondition').then(re => {
        var data = re.data
        vm.fundList.push({ fundCode: '', fundName: '请选择' })
        var fundLength = 0
        for (; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({ productType: '', productTypeName: '请选择' })
        var productLength = 0
        for (; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
        vm.paymentTypeList.push({ styleCode: '', styleName: '请选择' })
        for (var payStyleLength = 0; payStyleLength < data.data.payStyleList.length; payStyleLength++) {
          vm.paymentTypeList.push(data.data.payStyleList[payStyleLength])
        }
        vm.patternList.push({ patternCode: '', patternName: '请选择' })
        for (var patternLength = 0; patternLength < data.data.channelList.patternList.length; patternLength++) {
          vm.patternList.push(data.data.channelList.patternList[patternLength])
        }
      }).catch(er => {

      })
    },
    downLoad () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/loan/balanceAccount/service/downLoad'
      document.getElementById('exportList').submit()
    }
  }
}
</script>
<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
